<script>
    $(function() {
        function search(text) {
            $("#search").val(text);
            $("#searchform").submit();
        }

        $("#searchbutton").button();

        $( "#search" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "search",
                    dataType: "json",
                    data: {
                        maxRows: 12,
                        term: request.term
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.displayName,
                                value: item.displayName
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                search(ui.item.label);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });
</script>
<form id="searchform" action="search" method="post">
    <div class="ui-widget">
        <input id="search" name="search" size="35"/>
        <input id="searchbutton" type="submit" value="GO!"/>
    </div>
</form>